<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>webQQ</title>
		<%
			String name = request.getParameter("name");
			name = new String(name.getBytes("ISO-8859-1"), "utf-8");
		%>
		<script type="text/javascript" src="js/ajax-pushlet-client.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/IMServlet.js"></script>
		<link rel="stylesheet" type="text/css" href="css/IM.css" />

		<script type="text/javascript">
			//开始与服务器通信
            joinListen();
			//取消debug模式
    		PL.setDebug(false);
    		//封装在线用户
    		var onlines = new Array();
    		 // 服务器回调事件
    		function onEvent(event) {
    			var divId = $("#cw"+event.get('p_from')).html();
    			
    			alert(divId);
    			
    			var div = $("#cw");
    			var divInfo = div.html();
    		 	//如果是登陆的消息 并且不是自己发出的 页面中没有这个节点
		        if (event.getSubject() == '/user/login'&&PL.sessionId != event.get('p_from')&&divId==null) {
		        	var url = "UserServlet?cmd=addORupdate&p_from=" + event.get("p_from") + "&name=" + event.get("name") + "&p_time=" + event.get("p_time");
					url=encodeURI(url); 
		        	$.post(url, null, function (date) {
					//添加好有
					
					var cw = $("#cw").html();
					
						$("#cw").html(cw+date);
					
				
			
		});
		        	
		        	//写html代码， 进行用户的添加
		           var htmlInfo = "<DIV id=cw"+event.get('p_from')+" onclick=\"showChat('"+event.get('p_from')+"','"+event.get('name')+"')\">"+event.get('name')+"--在线</DIV>"+divInfo;
		        	
		        	//封装数据
		           var json = {id:event.get('p_from'),text:event.get('name'),aliveTS:event.get('p_time'),html:htmlInfo};
		        	
		          
		          //将数据加入到数组种
		          onlines.push(json);
		        }else if(event.getSubject() == '/user/login' && PL.sessionId != event.get('p_from')&&divId!=null){
		                 for(var i=0,online; online=onlines[i]; i++) {
		            		//更新当前的时间戳
		            		if(online.id==event.get('p_from')){
		               	 		online.aliveTS = event.get('p_time');
		           	 		}
		        		}
		        }
			    //如果是聊天的信息   
			    if (event.getSubject() == '/user/chat') {
			             var now = new Date();
           				 var time = " " + now.getHours()
                                    + ":" + now.getMinutes() + ":"
                                    + now.getSeconds() + "";
            		//解码回车符  消息在发送的时候对回车符进行了替换 现在替换回来 否则在经过服务器的时候回车符会丢失
            		var smessage = event.get('message');
            		var reg = new RegExp(PL.sessionId, "g"); // 创建正则RegExp对象
            		smessage = smessage.replace(reg, '\n');  
            		for(var i=0,online; online=onlines[i]; i++) {
		            		//更新当前的时间戳
		            		if(online.id==event.get('p_from')){
		            			showChat(online.id,online.text);
		            			var printInfo = $("#info"+online.id);
		            			printInfo.val(printInfo.val()+online.text+ '  ' + time + '  \n' + smessage+ '\n\n');
                           		document.getElementById("info"+(online.id)).scrollTop = document.getElementById("info"+(online.id)).scrollHeight;
		           	 		}
		        	}     
			    }
			 }
	    	//与服务器建立连接 建立session  并监听事件
	    	//   /pushlet/ping  是为了与服务器保持心跳  知道服务器没死
	    	//   /user/login  登陆信息  /user/login  聊天信息
	    	function joinListen() {
	        	PL.joinListen('/pushlet/ping,/user/login,/user/chat');
	   		}
	   		//借助一定周期的RefreshAck事件  发送我的在线信息  
	   		//是为了提供给刚上线的user 并监控在线用户的时间戳是否较新  否则判断为掉线 踢掉
	   		//Refresh是为了让服务器知道client没死
		   function onRefreshAck(event){
		        for(var i=0;i<onlines.length;i++){
		            //当前时间戳-上次更新的时间戳 如果间隔较大 说明没更新  掉了
		            if((event.get('p_time')- onlines[i].aliveTS)>15){
		               
    					var div = $("#cw");
    					var divInfo = div.html();
    					
    					
    					
    					
    					
    					
 						
 						
 						divInfo = divInfo.replace(onlines[i].html,"");
 						
 						if(divInfo.indexOf(onlines[i].text)){
 							
 							
 							divInfo = divInfo.substring(0,divInfo.lastIndexOf(onlines[i].text))+divInfo.substring(divInfo.lastIndexOf(onlines[i].text)+(onlines[i].text).length);
 							
 						}
 						
 						
    					div.html(divInfo);
    					del(i+1,onlines);  //从数组总删除
		            }
		        }
		        publish();
		   }
		   //发布上线信息
		    function publish() {
		        PL.publish('/user/login', 'name=<%=name%>');
		    }
		   //上线后马上发布我的上线信息
		   function onJoinListenAck(event){
			    publish();
		   }
		   
		   
		   var fromId  ;
		   var uName ;
		   //打开聊天窗口
		   function showChat(from,name){
		   var textareaInfo = $("#info"+fromId) ;
		   	if(textareaInfo.val()==null){
		   		$("#infoDiv").html("<textarea rows=\"20\" cols=\"60\" id=\"info"+from+"\" style=\"color: blue; font-weight: bold; font-size: 15\" readonly=\"true\"></textarea>");
		   	}
		  		 
		   
		   		
		   		
		   		$("#infoName").html("与"+name+"聊天中");
				var chatDiv = $("#chat");
				chatDiv.show();
				fromId = from ;
				uName = name;
				
				
			}

		//关闭聊天窗口
		  function closeChat(){
			var chatDiv = $("#chat");
			chatDiv.hide();
		 }
		 
		 //发送信息
		 function send(){
		 	//得到要发送信息的内容
		 	var smessage = $("#print").val();
		 	
		 	//输入框
		 	var print = $("#print") ;
		 	
		 	var printInfo = $("#info"+fromId);
		 	
		 	 //替换回车符
                        smessage=smessage.replace(/\r\n/ig,fromId);
                            PL.publish('/user/chat','p_to='+ fromId+ '&message='+ smessage);
                            //得到当前时间
                            var now = new Date()
                            var time = " " + now.getHours()
                                    + ":" + now.getMinutes() + ":"
                                    + now.getSeconds() + "";
                                    
                            printInfo.val(printInfo.val()+uName+ '  ' + time + '  \n' + print.val()+ '\n\n');
                                    
                           print.val("");
                          document.getElementById("info"+fromId).scrollTop = document.getElementById("info"+fromId).scrollHeight;
		 	 
		 }
	  </script>


	</head>
	<body onload="PL._init();">
		<table>
			<tr>
				<td>
					<div id="chat" style="display: none;">
						<table border="0" cellspacing="0">
							<tr>
								<td bgcolor="#BFCED4">
									<table border="0" cellspacing="0" cellpadding="4">
										<tr>
											<td>
												<div id="infoName"></div>
											</td>
											<td align="right">
												<a href="javascript:closeChat()" style="cursor: pointer">关闭</a>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td bgcolor="#EAEAEA" colspan="2">
									<p>
										<label for="chatRoom1">
											消息框:
										</label>
									<div id="infoDiv">

									</div>

									<label for="msg">
										输入框:
									</label>
									<textarea rows="5" cols="60" id="print"
										style="color: blue; font-weight: bold; font-size: 15"></textarea>
									<p>
										<button onclick="send()">
											发送
										</button>
									</p>
								</td>
							</tr>
						</table>
					</div>
				</td>

				<td>
					<div class="inf">
						<div class="main">
							<div class="main-right">
								<div class="main-right-t">
									欢迎使用web聊天 欢迎你：<%=name%>
								</div>
								<div class="main-right-1">
									<div class="main-right-2" style="cursor: pointer"
										onclick="auto_init('cw')">
										财务部
									</div>
									<div id="cw">
									</div>
								</div>
							</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>
